<style type="text/css">
    .clearfix::after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .header-title {
        font-size: 0.4rem;
        height: 1.085rem;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        background-color: red;
        color: white;
        letter-spacing: 0.05rem;
    }
    .proportion {
        margin-top: 0.3rem;
    }
    .proportion-img {
        width: 100%;
    }
    .female {
        margin-left: 0.3rem;
        width: 1rem;
        float: left;
    }
    .male {
        margin-right: 0.3rem;
        width: 1rem;
        float: right;
    }
    .proportion-show {
        margin-right: 0.3rem;
        margin-left: 0.3rem;
        background-color: #666699;
        height: 0.5rem;
        border-radius: 0.2rem;
    }
    .proportion-show span {
        float: right;
        margin-right: 0.25rem;
        color:white
    }
    .pfemale {
        border-radius: 0.2rem;
        width: 50%;
        background-color: #FF9999;
        height: 100%;
        display: inline-block
    }
    .pfemale span{
        float: left;
        margin-left: 0.25rem
    }
    .cursor-show {
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        height: 0.5rem;
    }
    .cursor {
        min-width: 0.5rem;
        width: 55%;
    }
    .member-list {
        margin-top: 0.2rem;
    }
    .item-name {
        font-weight: bold;
        font-size: 0.5rem;
    }
    .item-intro {
        font-size: 0.2rem;
        margin-top: 0.3rem;
    }
</style>

<div class="bui-page bui-box-vertical">
    <header>
       <div class="bui-bar header-title" style="background-color: red;">
        <div class="bui-bar-left">
            <a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
        </div>
        <div class="bui-bar-main" style="font-size: 0.4rem;">群成员列表</div>
        <div class="bui-bar-right">
        </div>
       </div>
    </header>
    <main class="member-main">
        <div class="bui-box proportion clearfix">
            <div class="proportion-img">
                <div class="female"><img src="images/groupmember/avatar39.png"></div>
                <div class="male"><img src="images/groupmember/avatar01.png"></div>
            </div>

        </div>
        <div class="proportion-show">
            <div class="pfemale">
                <span>50%</span>
            </div>
            <span class="pmale">50%</span>
        </div>
        <div class="cursor-show clearfix">
            <div class="cursor">
                <img src="images/groupmember/cursor.png" style="width: 0.5rem;float: right">
            </div>
        </div>
        <ul class="bui-list member-list">
            <li class="bui-btn bui-box">
                <div class="item-img" style="margin: auto 0.3rem">
                    <img src='images/other/35.jpg' style="border-radius: 50%; width: 1.5rem;height: 1.5rem">
                </div>
                <div class="span1">
                    <div class="item-name">Jackson Wang</div>
                    <div class="item-intro">13570512160</div>
                </div>
            </li>
            
        </ul>
    </main>
    <footer>
        <!-- 底部内容 -->
    </footer>
</div>